<template>
    <l-layout class="l-tab-page" v-show="!lr_loadPage" :top="queryHeight + 12" >
        <template #top  >
            <l-panel style="padding-bottom:0;">
                <l-query :items="items" :height.sync="queryHeight" :formData="queryData" :loading="loading" @search="hanleSearch">
                    <template #item1>
                        <el-input v-model="queryData.item1" placeholder="搜索框1"></el-input>
                    </template>
                    <template #item2>
                        <el-input v-model="queryData.item2" placeholder="搜索框2"></el-input>
                    </template>
                    <template #item3>
                        <el-input v-model="queryData.item3" placeholder="搜索框3"></el-input>
                    </template>
                    <template #item4>
                        <el-input v-model="queryData.item4" placeholder="搜索框4"></el-input>
                    </template>
                    <template #item5>
                        <el-input v-model="queryData.item5" placeholder="搜索框5"></el-input>
                    </template>
                </l-query>
            </l-panel>
        </template>
        <l-panel style="padding-top:4px;">
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-button @click="handleAdd" type="primary" size="mini" icon="el-icon-plus"  >新增</el-button>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns :hasTableSetting="true" :hasAdd="false" @setting="handleSetting">
                </l-tool-btns>
            </template>
            <l-table ref="mytable" :columns="columns" :dataSource="tableData" :loading="loading" >
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <l-fullscreen-dialog
            :title="`${$t('采购方案')}`"
            :visible.sync="formVisible"

            @ok="handleSave"
            @closed="handleClosed"
            @opened="handleOpened"
            >
            <my-form ref="form"></my-form>
        </l-fullscreen-dialog>
    </l-layout>
</template>

<script>
import myForm from './form'
export default {
    components: {
        myForm
    },
    data () {
        return {
            //查询
            searchWord:'',
            searchTableData:null,

            loading:false,
            columns: [
                {label:'编号',prop:'f_EnCode',width:'110'},
                {label:'名称',prop:'f_FullName',width:'110'},
                {label:'地址',prop:'f_UrlAddress',minWidth:'240'},
                {label:'目标',prop:'f_Target',width:'80',align:'center',formatter:function({cellValue}){
                    switch(cellValue){
                        case 'expand':
                            return '菜单目录';
                        case 'view':
                            return '功能页面';
                        case 'iframe':
                            return '外部页面';
                        default:
                            return cellValue;
                    }
                }},
                {label:'排序',prop:'f_SortCode',width:'64',align:'center'},
                {label:'状态',prop:'f_EnabledMark',width:'64',align:'center'}
            ],
            tableData:[],
            tableBtns:[
                {prop:'Edit',label:'编辑'},
                {prop:'Delete',label:'删除'}
            ],

            items:[
                {label:'搜索框1',prop:'item1'},
                {label:'搜索框2',prop:'item2'},
                {label:'搜索框3',prop:'item3'},
                {label:'搜索框4',prop:'item4'},
                {label:'搜索框5',prop:'item5'}
            ],
            queryData:{
                item1:'',
                item2:'',
                item3:'',
                item4:'',
                item5:'',       
            },
            queryHeight:44,


            formVisible:false,
            formEditRow:null,
            isEdit:false
        };
    },
    computed:{
    },
    mounted () {
    },
    methods:{
        hanleSearch(){

        },
        handleSetting(){
            this.$refs.mytable.openColumnsSetting();
        },
        handleAdd(){
            this.formVisible = true
        },

        handleClosed(){

        },
        handleOpened(){

        },
        handleSave(){
            this.formVisible = false
        }
    }

}
</script>
